<template>
  <div class="flow-container">
    <div class="forum-detail-layout">
      <!-- 左侧内容区 -->
      <div class="forum-detail-main" v-if="post">
        <div class="title-section">
          <div class="title-icon-group">
            <h2 class="detail-title">{{ post.title }}</h2>
          </div>
        </div>
        <div class="detail-meta" v-if="post">
          <div class="meta-item">
            <svg class="meta-icon" viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
            作者：{{ post.authorNickname }}
          </div>
          <div class="meta-item">
            <svg class="meta-icon" viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
            点赞：{{ post.likeCount }}
          </div>
          <div class="meta-item">
            <svg class="meta-icon" viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor" d="M9 11H7v6h2v-6zm4 0h-2v6h2v-6zm4 0h-2v6h2v-6zm2.5-9H18V1h-2v1H8V1H6v1H3.5A1.5 1.5 0 002 3.5v15A1.5 1.5 0 003.5 20h17a1.5 1.5 0 001.5-1.5v-15A1.5 1.5 0 0020.5 2z"/>
            </svg>
            时间：{{ post.createTime.slice(0, 10) }}
          </div>
        </div>
        <MarkdownPreview :markdown="post.content" class="detail-content" />
        <!-- 操作按钮区 -->
        <div class="detail-actions">
          <span class="action-text" @click="toggleLike" v-html="likeSvg"></span>
          <span
            class="el-icon custom-star-icon"
            @click="toggleFavorite"
            :class="{ 'is-favorite': isFavorite }"
          >
            <svg
              t="1751683570549"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3170"
              width="32"
              height="32"
            >
              <path
                d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428zM512 151.510204c-21.420408 0-40.228571 11.493878-50.155102 30.82449L398.628571 310.857143c-14.106122 28.734694-41.795918 48.587755-73.142857 53.289796l-141.583673 20.37551c-21.420408 3.134694-38.138776 17.240816-44.930612 38.138775-6.791837 20.37551-1.567347 41.795918 14.106122 56.946939L255.477551 579.918367c22.987755 22.465306 33.436735 54.857143 28.212245 86.204082l-24.032653 141.061224c-3.657143 21.420408 4.702041 41.795918 21.942857 54.334694 17.763265 12.538776 39.706122 14.106122 58.514286 4.179592L466.546939 799.346939c28.212245-15.15102 62.171429-15.15102 90.906122 0l126.955102 66.873469c19.330612 9.926531 41.273469 8.359184 58.514286-4.179592 17.763265-12.538776 25.6-32.914286 21.942857-54.334694l-24.032653-141.061224c-5.22449-31.869388 5.22449-63.738776 28.212245-86.204082L871.444898 480.653061c15.673469-15.15102 20.897959-36.571429 14.106122-56.946939-6.791837-20.37551-23.510204-35.004082-44.930612-38.138775l-141.583673-20.37551c-31.869388-4.702041-59.036735-24.555102-73.142857-53.289796l-63.216327-128.522449c-10.44898-20.37551-29.257143-31.869388-50.677551-31.869388z m-35.526531 666.122449z"
                p-id="3171"
              ></path>
            </svg>
          </span>
          <span class="el-icon custom-warning-icon" @click="openPostReport">
            <svg
              t="1751684322628"
              class="icon warning-svg"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4157"
              width="40"
              height="40"
            >
              <path
                d="M704 708.266667c8.533333-8.533333 21.333333-8.533333 29.866667 0 8.533333 8.533333 8.533333 21.333333 0 29.866666-59.733333 59.733333-140.8 89.6-221.866667 89.6-174.933333 0-320-145.066667-320-320S337.066667 192 512 192s320 145.066667 320 320c0 29.866667-4.266667 64-12.8 89.6-4.266667 12.8-17.066667 17.066667-25.6 12.8-12.8-4.266667-17.066667-17.066667-12.8-25.6 8.533333-25.6 12.8-51.2 12.8-81.066667 0-153.6-123.733333-277.333333-277.333333-277.333333s-281.6 128-281.6 281.6 123.733333 277.333333 277.333333 277.333333c72.533333 0 140.8-29.866667 192-81.066666zM512 597.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333v-213.333333c0-12.8 8.533333-21.333333 21.333333-21.333334s21.333333 8.533333 21.333333 21.333334v213.333333c0 12.8-8.533333 21.333333-21.333333 21.333333z m0 85.333334c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333 21.333333 8.533333 21.333333 21.333333-8.533333 21.333333-21.333333 21.333334z"
                p-id="4158"
              ></path>
            </svg>
          </span>
        </div>
        <div class="comment-publish">
          <div class="publish-header">
            <svg class="publish-icon" viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M9 22A1 1 0 0 1 8 21V18H4A2 2 0 0 1 2 16V4C2 2.89 2.9 2 4 2H20A2 2 0 0 1 22 4V16A2 2 0 0 1 20 18H13.9L10.2 21.71C10 21.9 9.75 22 9.5 22H9M6 9V11H18V9H6M6 13V15H16V13H6Z"/>
            </svg>
            <span class="publish-title">发表评论</span>
          </div>
          <el-input
            v-model="newComment"
            placeholder="说点什么吧…"
            class="comment-input"
            type="textarea"
            :rows="4"
            font-size="16"
            maxlength="200"
            show-word-limit
            resize="none"
          />
          <div class="publish-actions">
            <el-button
              type="primary"
              class="comment-submit-btn"
              size="small"
              @click="submitComment"
              :disabled="!newComment.trim()"
              >
              <svg class="btn-icon" viewBox="0 0 24 24" width="16" height="16">
                <path fill="currentColor" d="M2,21L23,12L2,3V10L17,12L2,14V21Z"/>
              </svg>
              发布
            </el-button>
          </div>
        </div>
        <!-- 评论区 -->
        <div class="comment-section">
          <div class="comment-header">
            <svg class="comment-section-icon" viewBox="0 0 24 24" width="24" height="24">
              <path fill="currentColor" d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22H9Z"/>
            </svg>
            <h3 class="comment-title">评论区</h3>
            <div class="comment-count-badge">{{ comments.length }}</div>
          </div>
          <div
            v-for="comment in comments"
            :key="comment.id"
            class="comment-item"
          >
            <div class="comment-left">
              <!-- 头像和昵称组 -->
              <div class="comment-user-group">
                <div class="avatar-wrapper">
                  <img :src="comment.avatar" class="comment-avatar" />
                  <div class="avatar-glow"></div>
                </div>
                <span class="comment-nick">{{ comment.nickname }}</span>
              </div>
            </div>
            <div class="comment-main">
              <div class="comment-content">
                <svg class="quote-icon" viewBox="0 0 24 24" width="16" height="16">
                  <path fill="currentColor" d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z"/>
                </svg>
                {{ comment.content }}
              </div>
            </div>
            <div
              class="comment-right"
              @mouseenter="(e) => handleReportMouseEnter(comment.id, e)"
              @mousemove="handleReportMouseMove"
              @mouseleave="handleReportMouseLeave"
            >
              <span
                class="el-icon custom-warning-icon"
                :class="{ 'report-hover': showReportTip === comment.id }"
                @click="openCommentReport(comment.id)"
              >
                <svg
                  t="1751684322628"
                  class="icon warning-svg"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4157"
                  width="40"
                  height="40"
                >
                  <path
                    d="M704 708.266667c8.533333-8.533333 21.333333-8.533333 29.866667 0 8.533333 8.533333 8.533333 21.333333 0 29.866666-59.733333 59.733333-140.8 89.6-221.866667 89.6-174.933333 0-320-145.066667-320-320S337.066667 192 512 192s320 145.066667 320 320c0 29.866667-4.266667 64-12.8 89.6-4.266667 12.8-17.066667 17.066667-25.6 12.8-12.8-4.266667-17.066667-17.066667-12.8-25.6 8.533333-25.6 12.8-51.2 12.8-81.066667 0-153.6-123.733333-277.333333-277.333333-277.333333s-281.6 128-281.6 281.6 123.733333 277.333333 277.333333 277.333333c72.533333 0 140.8-29.866667 192-81.066666zM512 597.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333v-213.333333c0-12.8 8.533333-21.333333 21.333333-21.333334s21.333333 8.533333 21.333333 21.333334v213.333333c0 12.8-8.533333 21.333333-21.333333 21.333333z m0 85.333334c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333 21.333333 8.533333 21.333333 21.333333-8.533333 21.333333-21.333333 21.333334z"
                    p-id="4158"
                  ></path>
                </svg>
              </span>
              <div
                v-if="showReportTip === comment.id"
                class="report-tooltip floating-tooltip"
                :style="{
                  left: reportTipPos.x + 'px',
                  top: reportTipPos.y + 'px',
                }"
              >
                举报
              </div>
            </div>
          </div>
          <!-- 新增：评论分页 -->
          <div class="comment-pagination" v-if="commentTotal > commentSize">
            <el-pagination
              :current-page="commentPage + 1"
              :page-size="commentSize"
              :total="commentTotal"
              layout="total, prev, pager, next"
              background
              @current-change="handleCommentPageChange"
            />
          </div>
        </div>
      </div>
      <div v-else class="loading-detail">加载中...</div>
      <!-- 右侧作者信息区 -->
      <div class="forum-detail-author" v-if="post">
        <div class="author-card-header">
          <svg class="author-icon" viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
          </svg>
          <span class="author-card-title">作者信息</span>
        </div>
        <div class="author-avatar-wrapper">
          <img
            :src="post.authorAvatar"
            class="author-avatar"
            @click="goToUserProfile"
            style="cursor: pointer"
          />
          <div class="author-avatar-ring"></div>
          <div class="author-status-dot"></div>
        </div>
        <div class="author-nick-follow">
          <div class="author-nick">{{ post.authorNickname }}</div>
          <el-button
            class="author-follow-btn"
            :type="isFollowing ? 'info' : 'primary'"
            size="small"
            plain
            @click="toggleFollow"
            :loading="loadingFollow"
          >
            <svg v-if="!loadingFollow" class="follow-icon" viewBox="0 0 24 24" width="14" height="14">
              <path v-if="!isFollowing" fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
              <path v-else fill="currentColor" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>
            </svg>
            {{ isFollowing ? "已关注" : "关注" }}
          </el-button>
        </div>
        <div class="author-stats">
          <!-- 删除发帖数和粉丝数 -->
        </div>
        <div class="author-bio">
          <svg class="bio-icon" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
          </svg>
          {{ author.personalIntroduce || '这个人很神秘，什么都没有留下...' }}
        </div>
      </div>
    </div>
    <!-- 举报弹窗，动态绑定 targetType/targetId -->
    <ReportModal
      v-model:visible="reportDialogVisible"
      :reporterID="Number(currentUserId)"
      :targetType="reportTargetType"
      :targetId="Number(reportTargetId)"
    />
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { useForumStore } from "../../stores/forum";
import { useUserStore } from "../../stores/user";
import { storeToRefs } from "pinia";
import { computed, onMounted, ref } from "vue";
import { ElIcon, ElButton } from "element-plus";
import { StarFilled, WarningFilled, Share } from "@element-plus/icons-vue";
import { getCommentsByPostId, addComment } from "../../api/comment";
import {
  getPostById,
  likePost,
  unlikePost,
  hasLiked,
  getLikeCount,
} from "../../api/post";
import MarkdownPreview from "../../components/MarkdownPreview.vue";
import { ElMessage } from "element-plus";
import ReportModal from "../../components/ReportModal.vue";
import { createReport } from "../../api/report";
import {
  checkFavoriteStatus,
  favoritePost,
  unfavoritePost,
} from "../../api/favorites";
import { followUser, unfollowUser, checkFollowStatus } from "../../api/follow";
import { getUserByIdApi } from "../../api/user";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const postId = Number(route.params.id);
const post = ref<any>(null);
const currentUserId = computed(() => userStore.id); // 从 userStore 获取用户ID，如果没有则默认为1

const commentPage = ref(0);
const commentSize = ref(10);
const commentTotal = ref(0);

const isFavorite = ref(false);

const comments = ref<any[]>([]);
const loadingComments = ref(false);
const isLiked = ref(false);
const likeCount = ref(0);
const reportDialogVisible = ref(false);
const reportTargetType = ref<"POST" | "COMMENT">("POST");
const reportTargetId = ref<number | null>(null);

const author = ref({
  id: 0,
  avatar: "",
  nickname: "",
  postCount: 0,
  fansCount: 0,
  personalIntroduce: "",
});

//关注
const isFollowing = ref(false);
const loadingFollow = ref(false);

// 检查关注状态
async function checkUserFollowStatus() {
  try {
    // 如果当前用户和作者是同一人，直接返回false并不检查
    if (Number(currentUserId.value) === Number(author.value.id)) {
      isFollowing.value = false;
      return;
    }
    console.log(
      "Checking follow status between:",
      currentUserId.value,
      "and",
      author.value.id
    ); // 调试日志
    const res = await checkFollowStatus(
      Number(currentUserId.value),
      Number(author.value.id)
    );
    console.log("Follow status response:", res.data); // 调试日志
    isFollowing.value = res.data;
  } catch (e) {
    console.error("检查关注状态失败:", e);
    isFollowing.value = false;
  }
}

// 切换关注状态
async function toggleFollow() {
  try {
    // 检查是否是尝试关注自己
    if (Number(currentUserId.value) === Number(author.value.id)) {
      ElMessage.warning("不能关注自己");
      return;
    }
    loadingFollow.value = true;
    console.log("Toggling follow status...", {
      currentUser: currentUserId.value,
      author: author.value.id,
    });

    if (isFollowing.value) {
      console.log("Executing unfollow...");
      const response = await unfollowUser(
        Number(currentUserId.value),
        Number(author.value.id)
      );
      console.log("Unfollow response:", response);
      isFollowing.value = false;
      ElMessage.success("已取消关注");
    } else {
      console.log("Executing follow...");
      const response = await followUser(
        Number(currentUserId.value),
        Number(author.value.id)
      );
      console.log("Follow response:", response);
      isFollowing.value = true;
      ElMessage.success("关注成功");
    }
  } catch (error) {
    console.error("操作失败详情:", {
      error: error.message,
      response: error.response?.data,
      config: error.config,
    });
    ElMessage.error(
      `操作失败: ${error.response?.data?.message || error.message}`
    );
  } finally {
    loadingFollow.value = false;
  }
}

// 获取帖子详情
async function fetchPost() {
  try {
    const res = await getPostById(postId);
    post.value = res.data;
    author.value.id = post.value.authorId;
    fetchAuthorInfo(author.value.id);
    checkUserFollowStatus();
  } catch (e) {
    post.value = null;
  }
}

//获取帖子的评论（带分页参数，适配后端接口，支持分页）
async function fetchComments(page = 0, size = 10) {
  loadingComments.value = true;
  try {
    const res = await getCommentsByPostId(postId, page, size);
    // 适配后端返回结构
    const arr = Array.isArray(res.data) ? res.data : [];
    comments.value = arr.map((c: any) => ({
      ...c,
      // 使用后端返回的nickname和avatar，如果没有则使用默认值
      avatar: c.avatar || `https://i.pravatar.cc/40?img=${(c.userId % 10) + 1}`,
      nickname: c.nickname || `用户${c.userId}`,
    }));
    // 如果后端返回总数，可赋值 commentTotal.value，否则用前端判断
    commentTotal.value =
      arr.length < size && page === 0
        ? arr.length
        : arr.length === size
        ? (page + 2) * size
        : (page + 1) * size;
    commentPage.value = page;
  } finally {
    loadingComments.value = false;
  }
}

// 检查用户是否已点赞
async function checkLikeStatus() {
  try {
    const res = await hasLiked(postId, Number(currentUserId.value));
    isLiked.value = res.data;
  } catch (e) {
    console.error("检查点赞状态失败:", e);
    isLiked.value = false;
  }
}

// 获取点赞数量
async function fetchLikeCount() {
  try {
    const res = await getLikeCount(postId);
    likeCount.value = res.data;
  } catch (e) {
    console.error("获取点赞数失败:", e);
    likeCount.value = 0;
  }
}

// 检查收藏状态
async function fetchFavoriteStatus() {
  try {
    const res = await checkFavoriteStatus(postId, Number(currentUserId.value));
    isFavorite.value = res.data;
  } catch (e) {
    console.error("检查收藏状态失败:", e);
    isFavorite.value = false;
  }
}

// 切换收藏状态
async function toggleFavorite() {
  try {
    if (isFavorite.value) {
      await unfavoritePost(postId, Number(currentUserId.value));
      isFavorite.value = false;
      ElMessage.success("已取消收藏");
    } else {
      await favoritePost(postId, Number(currentUserId.value));
      isFavorite.value = true;
      ElMessage.success("收藏成功");
    }
  } catch (error) {
    console.error("收藏操作失败:", error);
    ElMessage.error("操作失败，请重试");
  }
}

onMounted(() => {
  fetchPost();
  fetchComments();
  checkLikeStatus();
  fetchLikeCount();
  fetchFavoriteStatus();
});


async function fetchAuthorInfo(authorId: number) {
  try {
    const res = await getUserByIdApi(authorId);
    console.log("Fetched author info:", res);
    const user = res.data || {};
    author.value = {
      id: authorId,
      avatar: user.avatar,
      nickname: user.nickname,
      postCount: user.postCount,
      fansCount: user.fansCount,
      personalIntroduce: user.personalIntroduce,
    };
  } catch (e) {
    console.error("获取作者信息失败:", e);
  }
}

import { watch } from "vue";

const showReportTip = ref<number | null>(null);
const reportTipPos = ref({ x: 0, y: 0 });

function handleReportMouseEnter(commentId: number, e: MouseEvent) {
  showReportTip.value = commentId;
  updateReportTipPos(e);
}
function handleReportMouseMove(e: MouseEvent) {
  updateReportTipPos(e);
}
function handleReportMouseLeave() {
  showReportTip.value = null;
}
function updateReportTipPos(e: MouseEvent) {
  // 适当偏移，让tooltip在图标下方居中
  reportTipPos.value = {
    x: e.pageX - 40, // 左右居中
    y: e.pageY + 18, // 图标下方
  };
}

const newComment = ref("");

// 发布评论（调用后端 createComment 接口）
async function submitComment() {
  if (!newComment.value.trim()) return;
  try {
    await addComment({
      postId,
      userId: Number(currentUserId.value),
      content: newComment.value,
      nickname: userStore.nickname, // 添加用户昵称
    });
    newComment.value = "";
    fetchComments();
    ElMessage.success("评论发布成功");
  } catch (e) {
    ElMessage.error("评论发布失败");
  }
}

// 切换点赞状态
async function toggleLike() {
  try {
    if (isLiked.value) {
      // 当前已点赞，执行取消点赞
      await unlikePost(postId, Number(currentUserId.value));
      isLiked.value = false;
      post.value.likeCount -= 1; // 直接修改 post 对象的 likeCount
      ElMessage.success("取消点赞成功");
    } else {
      // 当前未点赞，执行点赞
      await likePost(postId, Number(currentUserId.value));
      isLiked.value = true;
      post.value.likeCount += 1;
      ElMessage.success("点赞成功");
    }
  } catch (error) {
    console.error("点赞操作失败:", error);
    ElMessage.error("操作失败，请重试");
  }
}
const svg1 = `<svg t="1750821968533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6962" width="32" height="32"><path d="M939.358251 423.424662c-23.01825-37.252439-62.924121-60.779272-107.019409-63.209624-2.755764-0.38681-5.510504-0.579191-8.347109-0.579191l-152.202471-0.121773c6.649444-28.975938 10.015098-58.653865 10.015098-88.657202 0-28.223808-3.213181-57.139372-9.556657-85.952604-0.447185-2.043542-1.098008-4.006244-1.932002-5.866614-15.820314-57.302077-67.37755-96.841605-127.282918-96.841605-72.827679 0-132.081201 59.254545-132.081201 132.081201 0 3.334955 0.132006 6.66991 0.406253 10.015098-2.196015 57.211003-32.108279 109.947088-80.269162 141.363611-14.447037 9.42465-18.524912 28.773324-9.099239 43.220361 9.414417 14.437827 28.752858 18.535145 43.220361 9.099239 65.811892-42.925648 106.429984-115.325585 108.656699-193.684234 0.030699-1.332345-0.010233-2.663666-0.14224-3.996011-0.203638-2.012843-0.304945-4.016477-0.304945-6.019087 0-38.381146 31.233352-69.614497 69.614497-69.614497 32.57593 0 60.474326 22.204721 67.824735 53.997821 0.356111 1.534959 0.823761 3.019777 1.402953 4.453429 4.696975 22.814612 7.076162 45.579081 7.076162 67.743894 0 37.485753-6.222725 74.352405-18.494213 109.592001-3.324722 9.546424-1.819438 20.111037 4.02671 28.345582 5.856381 8.245801 15.332197 13.146415 25.448602 13.156648l193.226816 0.101307c1.423419 0.264013 2.857071 0.426719 4.300956 0.477884 24.116257 0.9967 45.935192 13.614066 58.603723 34.090423 7.838525 12.31242 11.438517 26.800389 10.431583 41.939181-0.080841 0.945535-0.121773 1.911536-0.11154 2.877537 0 0.854461 0.040932 1.697665 0.11154 2.53166 0.010233 0.335644-0.030699 0.661056-0.11154 0.976234-0.101307 0.376577-0.193405 0.772596-0.284479 1.159406l-74.972529 330.391802c-0.914836 1.281179-1.738597 2.6432-2.449795 4.046153-5.937223 11.762905-14.660908 21.48329-25.346271 28.172643-10.746762 6.812149-23.059182 10.614755-35.757388 11.06194-0.854461-0.061398-513.766226-0.224104-513.766226-0.224104-0.467651-0.020466-0.935302-0.030699-1.402953-0.030699 0 0-111.01542 0.172939-112.718201 0.457418-1.932002 0-3.446495-1.50426-3.446495-3.415796l0.299829-416.334173c0-1.901303 1.545192-3.446495 3.01466-3.456728l1.245364 0.121773c1.174756 0.132006 2.653433 0.284479 3.52836 0.193405l83.82822-0.222057 0 339.367221c0 17.253966 13.979386 31.233352 31.233352 31.233352s31.233352-13.979386 31.233352-31.233352L281.009092 435.350273c0-1.778506 0-8.631588 0-10.411117 0-17.253966-13.979386-30.928407-31.233352-30.928407-1.50426 0-117.547183 0.304945-119.402437 0.304945-36.34272 0-65.913199 29.566386-65.913199 65.893756l-0.299829 416.334173c0 36.337603 29.571503 65.902966 65.913199 65.902966 2.541893 0 111.406323-0.457418 111.406323-0.457418 0.457418 0.020466 0.925069 0.030699 1.382487 0.030699 0 0 511.458671 0.274246 512.505513 0.274246 25.469068 0 50.296523-7.197936 71.647807-20.73116 19.612687-12.281721 35.777855-29.881564 46.839795-50.967812 3.660366-5.622044 6.435573-11.875468 8.256034-18.615986 0.11154-0.416486 0.213871-0.823761 0.304945-1.240247l74.881454-330.340637c1.596358-6.212492 2.257413-12.586666 2.00261-18.992563C960.892707 473.366098 953.948551 446.331371 939.358251 423.424662z" fill="#515151" p-id="6963"></path><path d="M450.027553 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C481.260905 532.629853 467.281519 518.650467 450.027553 518.650467z" fill="#515151" p-id="6964"></path><path d="M693.805696 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C725.039048 532.629853 711.058638 518.650467 693.805696 518.650467z" fill="#515151" p-id="6965"></path><path d="M648.940882 660.09492c-14.304797-9.393951-33.592073-5.398964-43.159986 8.763594-0.132006 0.193405-13.614066 19.754926-34.171264 19.754926-19.98824 0-32.423457-18.09717-33.266661-19.368116-9.17087-14.427594-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.366048-10.055007 43.016723 11.214413 18.047028 41.96988 48.588625 86.156242 48.588625 43.962258 0 75.104535-30.318516 86.572728-48.222281C667.404396 688.461991 663.216004 669.500127 648.940882 660.09492z" fill="#515151" p-id="6966"></path></svg>`;
const svg2 = `<svg t="1750821968533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6962" width="32" height="32"><path d="M939.358251 423.424662c-23.01825-37.252439-62.924121-60.779272-107.019409-63.209624-2.755764-0.38681-5.510504-0.579191-8.347109-0.579191l-152.202471-0.121773c6.649444-28.975938 10.015098-58.653865 10.015098-88.657202 0-28.223808-3.213181-57.139372-9.556657-85.952604-0.447185-2.043542-1.098008-4.006244-1.932002-5.866614-15.820314-57.302077-67.37755-96.841605-127.282918-96.841605-72.827679 0-132.081201 59.254545-132.081201 132.081201 0 3.334955 0.132006 6.66991 0.406253 10.015098-2.196015 57.211003-32.108279 109.947088-80.269162 141.363611-14.447037 9.42465-18.524912 28.773324-9.099239 43.220361 9.414417 14.437827 28.752858 18.535145 43.220361 9.099239 65.811892-42.925648 106.429984-115.325585 108.656699-193.684234 0.030699-1.332345-0.010233-2.663666-0.14224-3.996011-0.203638-2.012843-0.304945-4.016477-0.304945-6.019087 0-38.381146 31.233352-69.614497 69.614497-69.614497 32.57593 0 60.474326 22.204721 67.824735 53.997821 0.356111 1.534959 0.823761 3.019777 1.402953 4.453429 4.696975 22.814612 7.076162 45.579081 7.076162 67.743894 0 37.485753-6.222725 74.352405-18.494213 109.592001-3.324722 9.546424-1.819438 20.111037 4.02671 28.345582 5.856381 8.245801 15.332197 13.146415 25.448602 13.156648l193.226816 0.101307c1.423419 0.264013 2.857071 0.426719 4.300956 0.477884 24.116257 0.9967 45.935192 13.614066 58.603723 34.090423 7.838525 12.31242 11.438517 26.800389 10.431583 41.939181-0.080841 0.945535-0.121773 1.911536-0.11154 2.877537 0 0.854461 0.040932 1.697665 0.11154 2.53166 0.010233 0.335644-0.030699 0.661056-0.11154 0.976234-0.101307 0.376577-0.193405 0.772596-0.284479 1.159406l-74.972529 330.391802c-0.914836 1.281179-1.738597 2.6432-2.449795 4.046153-5.937223 11.762905-14.660908 21.48329-25.346271 28.172643-10.746762 6.812149-23.059182 10.614755-35.757388 11.06194-0.854461-0.061398-513.766226-0.224104-513.766226-0.224104-0.467651-0.020466-0.935302-0.030699-1.402953-0.030699 0 0-111.01542 0.172939-112.718201 0.457418-1.932002 0-3.446495-1.50426-3.446495-3.415796l0.299829-416.334173c0-1.901303 1.545192-3.446495 3.01466-3.456728l1.245364 0.121773c1.174756 0.132006 2.653433 0.284479 3.52836 0.193405l83.82822-0.222057 0 339.367221c0 17.253966 13.979386 31.233352 31.233352 31.233352s31.233352-13.979386 31.233352-31.233352L281.009092 435.350273c0-1.778506 0-8.631588 0-10.411117 0-17.253966-13.979386-30.928407-31.233352-30.928407-1.50426 0-117.547183 0.304945-119.402437 0.304945-36.34272 0-65.913199 29.566386-65.913199 65.893756l-0.299829 416.334173c0 36.337603 29.571503 65.902966 65.913199 65.902966 2.541893 0 111.406323-0.457418 111.406323-0.457418 0.457418 0.020466 0.925069 0.030699 1.382487 0.030699 0 0 511.458671 0.274246 512.505513 0.274246 25.469068 0 50.296523-7.197936 71.647807-20.73116 19.612687-12.281721 35.777855-29.881564 46.839795-50.967812 3.660366-5.622044 6.435573-11.875468 8.256034-18.615986 0.11154-0.416486 0.213871-0.823761 0.304945-1.240247l74.881454-330.340637c1.596358-6.212492 2.257413-12.586666 2.00261-18.992563C960.892707 473.366098 953.948551 446.331371 939.358251 423.424662z" fill="#8b5cf0" p-id="6963"></path><path d="M450.027553 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C481.260905 532.629853 467.281519 518.650467 450.027553 518.650467z" fill="#8b5cf0" p-id="6964"></path><path d="M693.805696 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C725.039048 532.629853 711.058638 518.650467 693.805696 518.650467z" fill="#8b5cf0" p-id="6965"></path><path d="M648.940882 660.09492c-14.304797-9.393951-33.592073-5.398964-43.159986 8.763594-0.132006 0.193405-13.614066 19.754926-34.171264 19.754926-19.98824 0-32.423457-18.09717-33.266661-19.368116-9.17087-14.427594-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.366048-10.055007 43.016723 11.214413 18.047028 41.96988 48.588625 86.156242 48.588625 43.962258 0 75.104535-30.318516 86.572728-48.222281C667.404396 688.461991 663.216004 669.500127 648.940882 660.09492z" fill="#8b5cf0" p-id="6966"></path></svg>`;
const likeSvg = computed(() => (isLiked.value ? svg2 : svg1));

function goToUserProfile() {
  router.push(`/profile/${author.value.id}`);
}

// 举报评论
function openCommentReport(commentId: number) {
  reportTargetType.value = "COMMENT";
  reportTargetId.value = commentId;
  reportDialogVisible.value = true;
}
// 举报帖子
function openPostReport() {
  reportTargetType.value = "POST";
  reportTargetId.value = postId;
  reportDialogVisible.value = true;
}

// 分页切换
function handleCommentPageChange(newPage: number) {
  fetchComments(newPage - 1, commentSize.value);
}

const isStarActive = ref(false);
function toggleStar() {
  isStarActive.value = !isStarActive.value;
}
</script>

<style scoped>
/* 基础布局保持不变 */
.forum-detail-layout {
  display: flex;
  gap: 40px;
  margin: 0px 50px;
  align-items: flex-start;
}

/* 主内容区优化 */
.forum-detail-main {
  flex: 2.5;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  padding: 36px 48px 24px 48px;
  min-width: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.forum-detail-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-purple), var(--primary-blue));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.forum-detail-main:hover {
  border-color: var(--light-purple);
  box-shadow: var(--shadow-purple);
  transform: translateY(-2px);
}

.forum-detail-main:hover::before {
  opacity: 1;
}

/* 标题区域样式 */
.title-section {
  margin-bottom: 24px;
}

.title-icon-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.title-icon {
  color: var(--primary-purple);
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.detail-title {
  color: var(--primary-blue);
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  text-align: left;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 元数据样式优化 */
.detail-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 15px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.meta-item:hover {
  background: var(--bg-primary);
  border-color: var(--light-purple);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.meta-icon {
  color: var(--primary-purple);
  transition: color 0.3s ease;
}

/* 内容区域 */
.detail-content {
  margin-bottom: 32px;
  background: var(--bg-secondary);
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.detail-content:hover {
  border-color: var(--light-blue);
  box-shadow: var(--shadow-sm);
}

/* 操作按钮区域 */
.detail-actions {
  display: flex;
  gap: 24px;
  margin-bottom: 36px;
  align-items: center;
  color: var(--text-primary);
  background: var(--bg-secondary);
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  height: auto;
  transition: all 0.3s ease;
}

.detail-actions:hover {
  background: var(--bg-primary);
  border-color: var(--light-purple);
  box-shadow: var(--shadow-md);
}

.action-text {
  font-size: 16px;
  color: var(--primary-blue);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  padding: 8px;
}

.action-text:hover {
  color: var(--primary-purple);
  transform: scale(1.15);
  background: rgba(139, 92, 246, 0.1);
}

.detail-actions .el-icon,
.detail-actions .custom-warning-icon,
.detail-actions .custom-star-icon,
.detail-actions .custom-share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.detail-actions .el-icon:hover,
.detail-actions .custom-warning-icon:hover,
.detail-actions .custom-star-icon:hover,
.detail-actions .custom-share-icon:hover {
  background: rgba(139, 92, 246, 0.1);
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.detail-actions .warning-svg {
  width: 32px !important;
  height: 32px !important;
  display: inline-block;
}

/* 收藏状态动画 */
.is-favorite {
  color: #ffb300 !important;
  animation: favoriteGlow 1.5s ease-in-out infinite alternate;
}

@keyframes favoriteGlow {
  from { filter: drop-shadow(0 0 4px #ffb300); }
  to { filter: drop-shadow(0 0 8px #ffb300); }
}

/* 评论发布区域优化 */
.comment-publish {
  background: var(--bg-secondary);
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.comment-publish:hover {
  border-color: var(--light-purple);
  box-shadow: var(--shadow-md);
}

.publish-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.publish-icon {
  color: var(--primary-purple);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}

.publish-title {
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 16px;
}

.publish-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.comment-input {
  margin-bottom: 12px;
}

.comment-submit-btn {
  min-width: 80px;
  height: 40px;
  background: var(--gradient-purple) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #9333ea 0%, #6d28d9 100%) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-purple);
}

.btn-icon {
  transition: transform 0.3s ease;
}

.comment-submit-btn:hover .btn-icon {
  transform: translateX(2px);
}

/* 评论区域标题 */
.comment-section {
  margin-top: 18px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.comment-header:hover {
  border-color: var(--light-purple);
  box-shadow: var(--shadow-sm);
}

.comment-section-icon {
  color: var(--primary-purple);
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.comment-title {
  font-size: 20px;
  color: var(--primary-blue);
  margin: 0;
  flex: 1;
}

.comment-count-badge {
  background: var(--gradient-purple);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 评论项优化 */
.comment-item {
  display: flex;
  align-items: flex-start;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
  position: relative;
  border: 1px solid var(--border-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.comment-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-purple);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.comment-item:hover {
  background: var(--bg-primary);
  border-color: var(--light-purple);
  transform: translateX(8px);
  box-shadow: var(--shadow-md);
}

.comment-item:hover::before {
  transform: scaleY(1);
}

.comment-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16px;
  gap: 8px;
}

.comment-user-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.avatar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--light-purple);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.avatar-glow {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: var(--gradient-purple);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 5px var(--primary-purple); }
  to { box-shadow: 0 0 15px var(--primary-purple); }
}

.comment-item:hover .avatar-glow {
  opacity: 0.6;
}

.comment-nick {
  color: var(--primary-blue);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.comment-item:hover .comment-nick {
  color: var(--primary-purple);
}

.comment-main {
  flex: 1;
  color: var(--text-primary);
  font-size: 16px;
  text-align: left;
  padding-right: 60px;
}

.comment-content {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.quote-icon {
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--primary-purple);
  opacity: 0.6;
}

.comment-right {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 作者信息区域优化 */
.forum-detail-author {
  flex: 1;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.forum-detail-author::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, var(--primary-purple), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: rotate-border 4s linear infinite;
}

@keyframes rotate-border {
  to { transform: rotate(360deg); }
}

.forum-detail-author:hover {
  border-color: var(--light-blue);
  box-shadow: var(--shadow-blue);
  transform: translateY(-4px);
}

.forum-detail-author:hover::before {
  opacity: 0.1;
}

.author-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  width: 100%;
  justify-content: center;
}

.author-icon {
  color: var(--primary-purple);
  animation: wiggle 2s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 7% { transform: rotateZ(0); }
  15% { transform: rotateZ(-15deg); }
  20% { transform: rotateZ(10deg); }
  25% { transform: rotateZ(-10deg); }
  30% { transform: rotateZ(6deg); }
  35% { transform: rotateZ(-4deg); }
  40%, 100% { transform: rotateZ(0); }
}

.author-card-title {
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 14px;
}

.author-avatar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--light-purple);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 3;
}

.author-avatar-ring {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(45deg, var(--primary-purple), var(--primary-blue)) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: ring-rotate 3s linear infinite;
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.author-status-dot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: #00ff88;
  border-radius: 50%;
  border: 3px solid var(--bg-primary);
  animation: status-pulse 2s infinite;
  z-index: 4;
}

@keyframes status-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(0, 255, 136, 0); }
}

.author-avatar:hover {
  border-color: var(--primary-purple);
  transform: scale(1.05);
}

.author-avatar-wrapper:hover .author-avatar-ring {
  opacity: 1;
}

.author-nick-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 6px;
}

.author-nick {
  font-size: 18px;
  color: var(--primary-blue);
  font-weight: bold;
  text-align: center;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.author-follow-btn {
  height: 36px;
  font-size: 14px !important;
  min-width: 80px;
  padding: 0 20px;
  margin: 0;
  background: var(--gradient-purple) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.author-follow-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.author-follow-btn:hover::before {
  left: 100%;
}

.author-follow-btn:hover {
  background: linear-gradient(135deg, #9333ea 0%, #6d28d9 100%) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-purple);
}

.follow-icon {
  transition: transform 0.3s ease;
}

.author-follow-btn:hover .follow-icon {
  transform: scale(1.1);
}

.author-bio {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  background: var(--bg-secondary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.author-bio:hover {
  border-color: var(--light-purple);
  background: var(--bg-primary);
}

.bio-icon {
  color: var(--primary-purple);
  flex-shrink: 0;
}

/* 其他样式保持不变 */
.loading-detail {
  text-align: center;
  color: var(--text-muted);
  margin-top: 80px;
  font-size: 20px;
}

.detail-actions .warning-svg path {
  fill: var(--text-secondary);
  transition: fill 0.3s;
}
.detail-actions .custom-warning-icon:hover .warning-svg path {
  fill: var(--primary-purple);
}

.custom-share-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2px;
}

.share-svg {
  width: 28px;
  height: 28px;
  display: inline-block;
}

.share-svg path {
  fill: var(--text-secondary);
  transition: fill 0.3s;
}

.custom-share-icon:hover .share-svg path {
  fill: var(--primary-purple);
}

.detail-actions .custom-star-icon .icon path {
  transition: fill 0.3s;
  fill: var(--text-secondary);
}

.detail-actions .custom-star-icon.is-favorite .icon path {
  fill: #ffb300;
}

.detail-actions .custom-star-icon:hover .icon path {
  fill: #ffe066;
}

.detail-actions .custom-star-icon:active .icon path {
  fill: #ffd600;
}

.comment-right .warning-svg {
  width: 32px !important;
  height: 32px !important;
}

.comment-right .warning-svg path {
  fill: var(--text-secondary);
  transition: fill 0.3s;
}

.comment-right .custom-warning-icon.report-hover .warning-svg path {
  fill: var(--primary-purple);
}

.report-tooltip {
  position: absolute;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.95;
  right: 0;
  bottom: 36px;
}

.floating-tooltip {
  position: fixed !important;
  right: auto;
  bottom: auto;
  left: 0;
  top: 0;
  transform: none;
  pointer-events: none;
}

/* 评论分页样式 */
.comment-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .forum-detail-layout {
    flex-direction: column;
    gap: 20px;
    margin: 0 20px;
  }
  
  .forum-detail-main {
    padding: 20px;
  }
  
  .detail-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .detail-actions {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .comment-item {
    padding: 12px 16px;
  }
  
  .comment-main {
    padding-right: 40px;
  }
}
</style>
